<template>
  <el-card shadow="hover">
    <template #header>
      <div class="title">
        <span>可达鸭股市榜</span>
      </div>
    </template>
   <e-charts :option="option" style="height:235px"></e-charts>
  </el-card>
</template>


<script setup lang="ts">
import { reactive } from 'vue';
import { timestampToDate } from '../../utils/time'
let timestamp = new Date().getTime() - 1000 * 3600 * 24 * 15

const date = new Array(15).fill(0).map(() => {
  timestamp += 1000 * 3600 * 24
  return timestampToDate(timestamp, 'yyyy-MM-dd')
})

const kedaPrice = new Array(15).fill(0).map(() => {
  return Math.floor(Math.random() * 350 + 30);
})
const jieniPrice = new Array(15).fill(0).map(() => {
  return Math.floor(Math.random() * 250 + 50);
})

const option = reactive({

  legend: {
    data: ['可达鸭', '杰尼龟'],
    left: 0
  },
  xAxis: {
    type: 'category',
    data: date
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: kedaPrice,
      type: 'line',
      name: '可达鸭'
    },
    {
      data: jieniPrice,
      type: 'line',
      name: '杰尼龟'
    }
  ],
  tooltip: {
    trigger: "axis",
  },
  grid: [
    {
      top: "30px",
      left: "50px",
      right: "25px"
    }
  ],
});
</script>

<style scoped lang="less">
</style>